<template>
  <div class="search">
    <Card>
      <Tabs v-model="tabName">
        <TabPane label="基本信息" name="base">
          <Row>
            <Form
              ref="detailRow"
              :model="detailRow"
              style="width: 100%"
              :label-width="120"
            >
              <FormItem label="活动名称"> {{ detailRow.title }} </FormItem>
              <FormItem label="报名时间"
                >{{ format(detailRow.ready_stime) }} ~
                {{ format(detailRow.ready_time) }}</FormItem
              >
              <FormItem label="活动时间"
                >{{ format(detailRow.act_stime) }} ~
                {{ format(detailRow.act_time) }}</FormItem
              >
              <FormItem label="报名人数上限">{{ detailRow.num || "无" }} </FormItem>
              <FormItem label="活动封面">
                <img v-if="detailRow.thumb" class="baseItem" :src="detailRow.thumb" />
              </FormItem>
              <FormItem label="活动详情">
                <div v-html="detailRow.content"></div>
              </FormItem>
              <div>
                <Button type="text" @click="toback">返回</Button>
              </div>
            </Form>
          </Row>
        </TabPane>
        <TabPane label="报名列表" name="name2">
          <Row>
            <Table
              :loading="loading"
              border
              :columns="columns"
              sortable="custom"
              class="mt_10"
              :data="dataList"
              ref="table"
            />
          </Row>
          <Row type="flex" justify="end" class="mt_10">
            <Page
              :current="searchForm.page"
              :total="total"
              :page-size="searchForm.pagesize"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            />
          </Row>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
import * as API_community from "@/api/community.js";

export default {
  name: "activity-detail",
  data() {
    return {
      tabName: "base", // 基本信息
      loading: false, // 加载状态
      searchForm: {
        // 请求参数
        page: 1,
        pagesize: 10,
        aid: null, // 活动ID
      },
      total: 0, // 总数
      detailRow: {
        id: null,
        title: null, // 活动名称
        sort: null, // 活动排序
        thumb: null, // 活动封面
        ready_time: null, // 报名时间
        act_time: null, // 活动时间
        num: null, // 报名人数上限
        content: null, // 活动详情
      }, // 表单
      dataList: [], //数据列表
      columns: [
        { title: "序号", minWidth: 100, align: "center", type: "index" },
        {
          title: "报名人头像",
          minWidth: 200,
          align: "center",
          render: (h, params) => {
            return h("div", {}, [
              h("img", {
                attrs: { src: params.row.face },
                style: {
                  width: "40px",
                  height: "40px",
                  borderRadius: "50%",
                  backgroundColor: "#c0c0c0",
                },
              }),
            ]);
          },
        },
        {
          title: "昵称",
          minWidth: 200,
          key: "nick_name",
          align: "center",
          tooltip: true,
        },
        {
          title: "提交时间",
          minWidth: 200,
          align: "center",
          tooltip: true,
          render: (h, params) => {
            let stime = this.format(params.row.ctime);
            return h("span", {}, stime);
          },
        },
      ],
    };
  },
  mounted() {
    let id = this.$route.query.id;
    this.init(id);
  },
  methods: {
    // 返回上级
    toback() {
      this.$store.commit("removeTag", "activity-detail");
      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
      this.$router.go(-1);
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.page = v;
      this.getActivityMember();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pagesize = v;
      this.searchForm.page = 1;
      this.getActivityMember();
    },
    // 时间戳转换
    format(v) {
      let date = "";
      if (v) date = new Date(v * 1000).Format("yyyy-MM-dd hh:mm:ss");
      return date;
    },
    // 初始化表单
    init(id) {
      if (id) {
        this.searchForm.aid = id;
        this.getActivityMember(id);
        API_community.activityDetail({ id }).then((res) => {
          if (res.code == 200) {
            Object.keys(this.detailRow).map((i) => {
              this.detailRow[i] = res.data[i];
            });
          }
        });
      }
    },
    // 获取活动报名人员列表
    getActivityMember() {
      API_community.activityMember(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data;
        }
      });
    },
    // 时间戳转换
    format(v) {
      let date = "";
      if (v) date = new Date(v * 1000).Format("yyyy-MM-dd hh:mm:ss");
      return date;
    },
  },
};
</script>
<style lang="scss">
.tox.tox-tinymce.tox-fullscreen {
  top: 110px !important;
  left: 190px !important;
  width: calc(100% - 202px) !important;
  height: calc(100% - 122px) !important;
}
.baseItem {
  display: inline-block;
  height: 150px;
  margin-right: 10px;
}
</style>
